<style lang="scss" scoped>
.container {
  padding: 0 16px;
}

.el-select .el-select--small {
  display: block !important;
}
</style>

<!-- 页面布局-->
<template>
  <div class="table">
    <!-- 主体区 -->
    <div class="container">
      <div class="grid-data-box" style="width: 850px;">
        <div class="detailTitle fxrow" style="overflow: hidden;justify-content: space-between;">
            <div class="fxrow fxsc" style="flex: 1;">
              <!-- <div>添加记录：{{tableData.length}}</div>
              <div style="margin-left: 100px;">制卡数量：{{cardNumTol}}</div> -->
              <div>制卡数量：{{cardNumTol}}</div>
            </div>
            <div>
              <el-button size="small" type="primary" :disabled="readOnly" @click="toAdd()">新增</el-button>
            </div>
        </div>
        <el-table v-loading="tableLoading" :data="tableData" max-height="350" border style="width: 100%" ref="singleTable" highlight-current-row @row-dblclick="clickToView" :cell-style="{padding:'3px 0 !important'}">
            <el-table-column type="index" width="50" label="序号"></el-table-column>
            <el-table-column prop="cardNum" width="80" show-overflow-tooltip label="申请数量"></el-table-column>
            <el-table-column prop="provinceName" width="80" show-overflow-tooltip label="省份" align="center"></el-table-column>
            <el-table-column prop="cityName" width="80" show-overflow-tooltip label="地市"  align="center"></el-table-column>
            <el-table-column prop="productName" show-overflow-tooltip label="产品名称"></el-table-column>
            <el-table-column prop="dnsegNum" width="80" show-overflow-tooltip label="号段"></el-table-column>
            <el-table-column prop="spName" width="100" show-overflow-tooltip label="卡商"></el-table-column>
            <el-table-column label="操作" width="150" fixed="right" >
                <template slot-scope="scope">
                    <el-button size="small" @click="toUpd(scope.$index, scope.row)" :disabled="readOnly" type="primary">修改</el-button>
                    <el-button size="small" @click="toDel(scope.$index, scope.row)" :disabled="readOnly" style="margin-left: 10px;" type="danger">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="navigate-box">
          <div class="pagination">
            <el-pagination background @current-change="handleCurrentChange" :total="parampters.totalCount" @size-change="handleSizeChange" :current-page.sync="parampters.pageIndex" :page-sizes="[20, 50, 100, 200]" :page-size="parampters.pageRows" layout="total, sizes, prev, pager, next"></el-pagination>
          </div>
        </div>
      </div>
     
      <!-- 表单区END -->
      <!-- 按钮操作区 -->
      <span slot="footer" class="form-btn-box" style="margin-top: 10px;">
        <!-- <el-button v-if="!readOnly" type="primary" @click="submitForm()" v-loading.fullscreen.lock="fullscreenLoading">完 成</el-button> -->
        <el-button @click="cnacelForm()">关 闭</el-button>
      </span>
      <!-- 按钮操作区END -->

    </div>
    <!-- 主体区END -->

    
  </div>
</template>
<script>
import batchApplyForm from "./applybatch_batchapply_form"
export default {
  data() {
    return {
      // 筛选条件
      parampters: {
        //查询参数
        pageRows: 20, //每页行数
        pageIndex: 1, //当前页
        pageCount: 0, //总页数
        totalCount: 0, //总记录数
      },
      // 提交表单的loading设置标识
      fullscreenLoading: false,
      firstLoadedData: "{}",
      //事物类型
      actType: "",
      // 表单只读状态
      readOnly: false,
      //字典集
      dicts: {},
      tableLoading: false,
      tableData: [],
      cardNumTol: 0,
      seleSpNo: "",
      cardApplyBatchId: ""
    };
  },
  props: {
    sourceData: {
      required: true
    }
  },
  // 进入页面加载数据
  mounted() {
    this.handleInitLoad();
  },
  methods: {
    /**
     * 组件初始化加载
     */
    handleInitLoad() {
      this.initSelectOptoins();
    },

    /**
     * 初始加载字典选项
     */
    initSelectOptoins() {
      this.loadSelectOptoins("province", {"isp":10010});
      this.loadSelectOptoins("sp", {"isp":10010});
      this.loadSelectOptoins("dnseg", null);
    },

    initCityOptions(province){
      let params = {
        provinceId: province.provinceId
      }
      this.loadSelectOptoins("city", params);
    },

    /**
     * 通用定义:下拉字典
     *  @augments dictKind 字典类型
     */
    loadSelectOptoins(dictKind, params) {
      let url = "/rps/" + dictKind + "/";
      this.$axios
      .get(url, {
        params: params,
        headers:{
            operator: this.$util.getLoginer().userid,
            withCredentials: true
        }
      })
      .then(res => {
        let data = res.data;
        if (data.success) {
          this.$set(this.dicts, dictKind, data.data.list);
        } else {
          this.$error( "查询失败" + data.message );
        }
      })
      .catch(err => {
        console.log(err);
      });
    },

    /**
     * 取消返回
     */
    cnacelForm() {
      this.$emit("ok", null);
    },
    
    /**
     * @augments val 页码
     * 切换页码操作
     */
    handleCurrentChange(val) {
      this.parampters.pageIndex = val;
      // 重新获取当前页码的数据
      this.initFormData();
      this.getCardNumTol();
    },

    /**
     * @augments val 每页显示条数
     * 每页显示条数修改
     */
    handleSizeChange(val) {
      // 修改每页显示条数
      this.parampters.pageRows = val;
      // 重新获取数据
      this.initFormData();
      this.getCardNumTol();
    },
    
    /**
     *初始化加载表单数据
     */
    initFormData() {
      this.tableLoading = true;
      if(this.cardApplyBatchId != null && this.cardApplyBatchId != undefined && this.cardApplyBatchId != ""){
        var url = "/rps/cardApplyDetail/";
        url += this.cardApplyBatchId + "/?" + new Date().getTime();
        this.$axios
          .get(url, {
              params: this.parampters,
              headers: {
                operator: this.$util.getLoginer().userid,
                withCredentials: true
              }
            }
          )
          .then(res => {
            let data = res.data;
            if (data.success) {
              this.tableData = data.data.list;
              this.tableLoading = false;
              this.parampters.pageIndex =
                data.data.pageNum != undefined ? parseInt(data.data.pageNum) : 0;
              this.parampters.pageCount =
                data.data.totalPage != undefined ? parseInt(data.data.totalPage) : 0;
              this.parampters.totalCount =
                data.data.count != undefined ? parseInt(data.data.count) : 0;
              
              if(this.tableData != null && this.tableData != undefined && this.tableData.length > 0){
                this.seleSpNo = this.tableData[0].spNo;
              }else{
                this.seleSpNo = "";
                this.cardApplyBatchId = "";
              }
            } else {
              this.tableLoading = false;
              this.$error(data.message);
            }
          })
          .catch(err => {
              this.tableLoading = false;
              console.log(err);
          });
      }
    },

    /**
     * 提交表单
     */
    submitForm() {
      this.$message({
        message: "数据保存成功.",
        type: "success"
      });
      this.$emit("ok", {});
    },
    /**
     * 新增记录
     */
    toAdd(){
      //页面参数
      var pageParam = {
        actType: "add",
        seleSpNo: this.seleSpNo,
        cardApplyBatchId: this.cardApplyBatchId
      };
      let commDialog = this.$dialog.commDialog(
        "编辑记录",
        batchApplyForm,
        pageParam,
        "700px",
        "410px"
      );
      commDialog.exec.then(resp => {
        if (resp.type == "ok") {
          this.cardApplyBatchId = resp.data.cardApplyBatchId;
          this.initFormData();
          this.getCardNumTol();
        } else if (resp.type == "cancel") {
        }
      });
    },

    clickToView(rowData, column, event) {
			this.toView(rowData);
    },
    
    toView(row){
      //页面参数
      var pageParam = {
        actType: "view",
        item: row,
        seleSpNo: this.seleSpNo
      };
      let commDialog = this.$dialog.commDialog(
        "查看记录",
        batchApplyForm,
        pageParam,
        "700px",
        "410px"
      );
      commDialog.exec.then(resp => {
        if (resp.type == "ok") {
          
        } else if (resp.type == "cancel") {
        }
      });
    },

    toUpd(index, row){
      //页面参数
      var pageParam = {
        actType: "upd",
        item: row,
        seleSpNo: this.seleSpNo,
        cardApplyBatchId: this.cardApplyBatchId
      };
      let commDialog = this.$dialog.commDialog(
        "编辑记录",
        batchApplyForm,
        pageParam,
        "700px",
        "410px"
      );
      commDialog.exec.then(resp => {
        if (resp.type == "ok") {
          this.cardApplyBatchId = resp.data.cardApplyBatchId;
          this.initFormData();
          this.getCardNumTol();
        } else if (resp.type == "cancel") {
        }
      });
    },

    toDel(index, row){
      let url = "/rps/cardApplyBatch/"+ this.cardApplyBatchId +"/cardApplyDetail/";
      let formData = [];
      formData.push(row);
      this.$axios
        .delete(url, {
          data: formData
        }, {
          headers: {
            operator: this.$util.getLoginer().userid,
            withCredentials: true
          }
        })
        .then(res => {
          let data = res.data;
          // 关闭提交表单的loading
          this.fullscreenLoading = false;
          if (data.success) {
            this.$message({
              message: "删除记录成功.",
              type: "success"
            });
            this.initFormData();
            this.getCardNumTol();
          } else {
            this.$error(data.message);
          }
        })
        .catch(err => {
          this.fullscreenLoading = false;
          console.log(err);
        });
    },

    getCardNumTol(tableData){
      this.$axios.get("/rps/cardApplyDetail/"+ this.cardApplyBatchId +"/sumCardNum/", {
        params:{}
      }).then(res => {
        let data = res.data;
        if(data.success){
          this.cardNumTol = data.data
        }
      })
    },

  }
};
</script>
